<template>
  <div>
      <div class="tpojia">
          <div class="poyutotot">
              <van-nav-bar title="添加地址" 
              @click-left="fanhui"
              @click-right="hhijia"
               left-arrow>
                  <!-- <template #right>
                    <van-icon name="search" size="18" />
                  </template> -->
              </van-nav-bar>
          </div>
          <div class="youm">
            <van-address-edit
              :show-postal="false"
              show-delete
              :show-area="false"
              :show-set-default="false"
              show-search-result
              :search-result="searchResult"
              :area-columns-placeholder="['请选择', '请选择', '请选择']"
              @save="onSave"
              @delete="onDelete"
              />
          </div>
      </div>
  </div>
</template>

<script>

import Vue from 'vue';
import { AddressEdit,Toast,Icon } from 'vant';
Vue.use(AddressEdit).use(Toast).use(Icon);
import { NavBar } from 'vant';
Vue.use(NavBar);
import { Area } from 'vant';
// import { areaList } from '@vant/area-data';
Vue.use(Area);
export default {
    data(){
        return{
          areaList:"",
          searchResult: [],
          id:10,
        }
    },
    methods: {
    onSave(content) {
      // Toast('save');
      console.log(this.id);
        
        let data = {
          id:this.id,
          name:content.name,
          tel:content.tel,
          address:content.addressDetail,
          isDefault:content.isDefault
        }
        let lisgo = JSON.parse(sessionStorage.getItem('addresslist'));//取数据
        if(lisgo){
           lisgo.push(data);
           window.sessionStorage.setItem('addresslist',JSON.stringify(lisgo));//存数据
        }else{
          let pujiuv= [];
          pujiuv.push(data);
          window.sessionStorage.setItem('addresslist',JSON.stringify(pujiuv));//存数据
        }
        this.id +=1 ;
        let Id = this.id;
        window.sessionStorage.setItem('addresslistId',JSON.stringify(Id));//存数据
        this.$router.push('/adderss');
        // console.log(data)
        
    },
    getid(){
          let idto = JSON.parse(sessionStorage.getItem('addresslistId'));//取数据
          if(idto){
            this.id = idto;
          }
    },
    onDelete(){
      // Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    fanhui(){
        this.$router.push('/adderss');
    },
    hhijia(){
        this.$router.push('/adderss');
    }
  },
  created(){
    this.getid();
  }
}
</script>

<style lang="less">
.tpojia{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #fff;
    z-index: 90;
    .poyutotot{
      width: 100%;
      height: 50px;
      .van-nav-bar__content{
        i{
          color: #000;
        }
      }
    }
    .youm{
        width: 100%;
        margin-top: 10px;
    }
}
</style>